import React, { Component } from "react";
import "./index.scss";

class CertiBanner extends Component {
	constructor(props) {
		super(props);
		this.state = {};
	}
	render() {
		const { bannerData = {} } = this.props;
		const {
			orderValue,
			orderDiscountValue,
			couponValue,
			bannerList = [],
			displayStatus
		} = bannerData;
		return (
			<div className="certi-banner">
				{displayStatus == 1 ? (
					<div className="banner-detail">
						{(() => {
							switch (couponValue) {
								case "5":
									return (
										<img
											className="banner"
											src="https://jrcdn.yonghui.cn/yhjr/yh_supermarket_sdk/yhLife/wallet/banner_01kv.png"
											onLoad={this.props.onLoad}
										/>
									);

								case "10":
									return (
										<img
											className="banner"
											src="https://jrcdn.yonghui.cn/yhjr/yh_supermarket_sdk/yhLife/wallet/banner_01kv_2.png"
											onLoad={this.props.onLoad}
										/>
									);
							}
						})()}

						<div className="title">
							<p>本单立减{couponValue || "0"}元</p>
						</div>
						<div className="order-money">
							<p>订单金额</p>
							<span>¥{orderValue || "0.00"}</span>
						</div>
						<div className="reduction">
							<p>立减</p>
							<span>
								<i>{couponValue || "0"}</i>元
							</span>
						</div>
						<div className="after-discount">
							<p>优惠后金额</p>
							<span>¥{orderDiscountValue || "0.00"}</span>
						</div>
					</div>
				) : (
					<img
						className="banner"
						onLoad={this.props.onLoad}
						src={
							bannerList && bannerList.length > 0 ? bannerList[0].imgUrl : ""
						}
					/>
				)}
			</div>
		);
	}
}

export default CertiBanner;
